<template>
  <div>
    <loading :state="loading"/>
    <div class="head">
      <div class="head-btn">
        <div class="btn" :class="{active1: showFirst, btn1: !showFirst}" @click="switchPage">
          <h1>开通免费{{openType|showType}}</h1>
        </div>
        <div class="btn" :class="{active2: !showFirst, btn2:showFirst}" @click="switchPage">
          <h1>查看已开通</h1>
        </div>
      </div>
      <div class="bot-l">
        <div class="left">
          <p>已开通</p>
          <h1>{{openNum.hasOpen}}</h1>
        </div>
        <div class="right">
          <p>未开通</p>
          <h1>{{openNum.needOpen}}</h1>
        </div>
      </div>
    </div>
    <div class="openVip" v-if="showFirst">
      <ul class="info" v-if="JSON.stringify(result) !=='{}'">
        <li>
          <img :src=result.img alt=""/>
          <div class="list">
            <div class="list-first">
              <h1>{{result.name}} </h1>
              <h2>ID{{result.id}}</h2>
            </div>
            <div class="list-second">
              <p v-if="result.tips">{{result.tips}}</p>
              <div class="btn" :class="{active:isActive}" @click="openVip">{{ result|showStatus }}</div>
            </div>
            <ul class="list-detail" v-if="result.between && result.between.length>0">
              <li v-for="(item, index) in result.between" :key="index">
                <p>{{ item.name}}</p>
                <p>（{{ item.rank}}） ID{{ item.uid}}</p>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <div class="bottom">
        <!--<img :src="bkline">-->
        <div class="search">
          <van-search placeholder="请输入需要开通成员的ID" v-model="value" style="background: #fff" @search="onSearch"/>
        </div>
      </div>
    </div>
    <div class="nameList" v-else>
      <ul class="info">
        <li v-for="(item, index) in nameList" :key="index">
          <img :src=item.accept_user_img alt=""/>
          <div class="list">
            <div class="list-first">
              <h1>{{item.accept_user_name}}</h1>
              <h2>ID{{item.accept_uid}}</h2>
            </div>
            <div class="list-third">
              <p>开通时间：{{created[index]}}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <popup :pupData="pupData" @sureFun="sureFun" @cancelFun="cancelFun" ref="popupref"/>
    <popup :pupData="pupPay" @sureFun="surePay" @cancelFun="cancelPay" ref="popupPay"/>
  </div>
</template>

<script type="text/ecmascript-6">
  import Moment from 'moment';
  export default {
    data() {
      return {
        openType: this.$route.query.para,
        loading: true,
        value: '', // 搜索的内容
        showFirst: true, // 页面切换
        listImg: `${this.$Public.ossImg}mingdan.svg`,
        openImg: `${this.$Public.ossImg}yaoshi.svg`,
        bkline: `${this.$Public.pageImg}sx_bkline.png`,
        result: {}, // 需开通vip
        nameList: [], // 名单列表
        openNum: {
          hasOpen: '',
          needOpen: ''
        },
        pupPay: {
          des: '确认支付?',
          cancel: '取消',
          sure: '确定'
        },
        pupData: {
          des: '确认开通?',
          cancel: '取消',
          sure: '确定'
        },
        openStatus: '',
        created: []
      };
    },
    created() {
      let data = {
        type: this.openType,
        getHasOpen: 'ok'
      };
      this.$Spread.getVipNum(data).then(res => {
        console.log(res);
        this.loading = false;
        this.openNum.hasOpen = res.data.hasOpenNum;
        this.openNum.needOpen = res.data.top_num;
      }, () => {
        this.loading = false;
      });
    },
    computed: {
      valueNumber() {
        return this.value.replace(/[^0-9]/ig, '');
      },
      isActive() {
        return !this.result.tips;
      }
    },
    filters: {
      isOpen(val) {
        if (val) {
          return '收起';
        } else {
          return '详情';
        }
      },
      showStatus(val) {
        if (val.money === 0) {
          return '开通总代';
        } else if (val.tips) {
          return '不可开通';
        } else {
          return '￥' + val.money;
        }
      },
      showType(val) {
        if (val === 'vip') {
          return 'vip';
        } else {
          return '总代';
        }
      }
    },
    methods: {
      sureFun() {
        this.$refs.popupref.switchState();
        // 开通方法
        let data = {
          downUid: this.valueNumber,
          type: this.openType
        };
        this.loading = true;
        this.$Spread.OpenAgent(data).then(res => {
          this.loading = false;
          this.$toast({
            message: '授权身份成功',
            duration: 1500
          });
          this.$router.push('user');
        }, () => {
          this.loading = false;
        });
      },
      cancelFun() {
        // 取消开通方法
        this.$refs.popupref.switchState();
      },
      surePay: function () {
        this.$refs.popupPay.switchState();
        // 确定付费方法
        let data = {
          downUid: this.valueNumber,
          type: this.openType
        };
        this.loading = true;
        this.$Spread.OpenAgent(data).then(res => {
          this.loading = false;
          let data = {
            type: res.type,
            id: res.logId
          };
          this.$router.push({
            name: 'pay-option',
            query: data
          });
        }, () => {
          this.loading = false;
        });
      },
      cancelPay() {
        // 取消付费方法
        this.$refs.popupPay.switchState();
      },
      onSearch() {
        let data = {
          type: this.openType,
          downUid: this.valueNumber
        };
        this.loading = true;
        this.$Spread.getOpenVipList(data).then(res => {
          this.loading = false;
          this.result = res;
          if (res.money === 0) {
            this.openStatus = 'yes';
          } else if (res.tips) {
            this.openStatus = 'no';
          } else {
            this.openStatus = 'pay';
          }
        }, () => {
          this.loading = false;
        });
      },
      openVip() {
        // status:pay需付费开通，yes表示可直接开通
        if (this.openStatus === 'pay') {
          this.$refs.popupPay.switchState();
        } else if (this.openStatus === 'yes') {
          this.$refs.popupref.switchState();
        } else {
          return false;
        }
      },
      switchPage() {
        this.showFirst = !this.showFirst;
        let data = {
          type: this.openType
        };
        if (!this.showFirst) {
          this.$Spread.getNameList(data).then(res => {
            this.nameList = res.list;
            res.list.forEach((item) => {
              let time = Moment(item.created * 1000).format('YYYY-MM-DD HH:mm');
              this.created.push(time);
            });
          });
        }
      }
    }
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl";
  .search .van-search {
    border-radius(20px)
    position: absolute;
    width: 94vw;
    top: -6vw;
    left: 3vw;
  }

  .head {
    padding-top: 5vw;
    .head-btn {
      flex-center();
    }
    & p {
      font-size word10;
      color: third-ash
    }
    & span {
      color: main-color
    }
    & .btn {
      height: 10vw
      overflow hidden
      background bk-color
      border(main-color)
      padding 0 9vw
      box-sizing border-box
      flex-x();
      &.btn1 {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
      }
      &.btn2 {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
      }
      & img {
        width: 5vw;
        heigth: 5vw;
        &.rotate-img {
          transform rotate(270deg);
        }
      }
      & h1 {
        color: main-color
      }
    }
    .active1 {
      background gradient-color
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      & h1 {
        color: white
      }
    }
    .active2 {
      background gradient-color
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      & h1 {
        color: white
      }
    }
    .bot-l {
      flex-center();
      margin-top 10px
      & p {
        font-size 3.7vw;
      }
      & h1 {
        word-vw(18, black)
        margin-top: 5px;
      }
      .left {
        margin-right 10px;
        text-align right
      }
      .right {
        margin-left 10px
        text-align left
      }
    }
  }

  .openVip {
    margin-top: 7vw;
  }

  .nameList {
    margin-top 7vw
  }

  .info {
    & > li {
      width: 94%;
      background white
      flex-x(flex-start, flex-start);
      margin-bottom 10px;
      border-radius(10px)
      margin-left 3%
      & img {
        width: 15vw;
        height: 15vw;
        border-radius(50%);
        flex: none
        margin: 2vw;
      }
      & .list {
        width: 100%;
        flex: 1;
        flex-y(center, flex-start);
        .list-first {
          padding 0 2vw
          box-sizing border-box
          width: 100%;
          height: vw(40);
          flex-x();
          bor-b();
        }
        .list-second {
          padding 0 2vw
          box-sizing border-box
          width: 100%;
          height: vw(45);
          flex-x(space-between);
          bor-b();
          & p {
            color: third-ash
          }
          & span {
            display: block;
            width: 0;
            height: 0;
            border-width: 1vw;
            border-style: solid;
            border-color: first-ash transparent transparent transparent
            margin 2vw 4vw 0 1vw
            &.rotate {
              border-color: transparent transparent first-ash transparent
              margin: -1vw 4vw 0 1vw;
            }
          }
          & .btn {
            font-size word14
            width: 24vw
            height: 7vw
            border-radius(20px);
            flex-x(center, center);
            color: third-ash
            border(third-ash);
            &.active {
              color: main-color
              border(main-color);
            }
          }
        }
        .list-third {
          padding 0 2vw
          box-sizing border-box
          width: 100%;
          height: vw(45);
          flex-x();
          bor-b();
          & p {
            font-size word12;
            color: third-ash
          }
        }
        .list-detail {
          width: 100%;
          height: vw(90)
          overflow hidden
          transition(all, 0.3s);
          &.fade-enter, &.fade-leave-to {
            height: vw(0);
          }
          & li {
            width: 100%;
            height: vw(30);
            padding 0 2vw
            box-sizing border-box
            flex-x();
            bor-b();
          }
        }
      }
    }
  }

  .bottom {
    width: 100%;
    height: vw(55);
    background gradient-color
    position fixed
    bottom: 0
    box-sizing border-box
    flex-x();
    .search {
      margin-bottom 10px;
      width: 100%;
    }
    img {
      width: 100%;
      position: absolute;
      top: 6vw
    }
  }

</style>
